import { List, Space, Tag } from 'antd';
import React, { memo, useCallback } from 'react';

import classNames from 'classnames';
import { cls } from './config';
import { getSyetemList } from '../../../../../service/system';
import { useRequest } from 'ahooks';
import variables from '../../../../../lib/themeVariables';

const SystemList = ({ handleClickItem, onSuccess, curSystem }) => {
  const { loading, data } = useRequest(
    () =>
      getSyetemList({ page: 1, size: 999 }).then((res) => {
        return res.data.docs;
      }),
    {
      onSuccess(res) {
        onSuccess && onSuccess(res);
      },
    },
  );

  const renderItem = useCallback(
    (item) => {
      const clickItem = () => handleClickItem && handleClickItem(item);

      return (
        <List.Item
          className={classNames([
            cls('system-list-item'),
            curSystem?.id === item.id && 'active',
          ])}
          onClick={clickItem}
        >
          <List.Item.Meta
            title={
              <Space>
                {item.name}
                <Tag color={variables.primaryColor}>{item.code}</Tag>
              </Space>
            }
          />
        </List.Item>
      );
    },
    [curSystem?.id, handleClickItem],
  );
  return (
    <List
      size="small"
      className={cls('system-list')}
      loading={loading}
      dataSource={data}
      renderItem={renderItem}
    />
  );
};

export default memo(SystemList);
